// 1.缓存DOM查询结果
for(let i=0;i<document.getElementsByTagName('p'.length);i++){
    //每次都循环会计算length，重复进行DOM查询
}

// 缓存DOM查询结果
const pList=document.getElementsByTagName("p")
const length=pList.length;
for(let i=0;i<length;i++){
    // 缓存length,只进行一次DOM查询
}


// 耗费性能
// const List=document.getElementById('list');
// for(let i=0;i<10;i++){
//     const li=document.createElement('li');
//     li.innerHTML=`List item ${i}`
//     List.appendChild(li)
// }

// 把每次创建当做一个整体:

const listNode=document.getElementById('List');
//创建一个文档片段，此时还没插入到DOM树中
const frag=document.createDocumentFragment()
//执行插入
for(let x=0;i<10;i++){
    const li=document.createElement('li');
    li.innerHTML="List item " + x
    frag.appendChild(li)
}
// 都完成以后，在插入到DOM树中
listNode.appendChild(frag);


// DOM是那种数据结构：是树形结构